<script>
/**
 * @name date-panel
 * @desc 日期的月份面板,用于选择日期
 */

import { dateFormate } from '@/utils'

export default {
  name: 'date-panel',
  props: {
    dateArr: Array,
    handleClick: Function,
    checkedDate: String
  },
  computed: {
    dateList() {
      const beforeLength = new Date(this.dateArr[0].date).getDay()
      const last = (beforeLength + this.dateArr.length) % 7
      const afterLength = last ? 7 - last : 0
      const arr = []
      for (let i = 0; i < beforeLength; i++) {
        arr.push({ date: '', text: 0 })
      }
      this.dateArr.forEach(v => {
        arr.push({ ...v, text: new Date(v.date).getDate() })
      })
      for (let i = 0; i < afterLength; i++) {
        arr.push({ date: '', text: 0 })
      }
      return arr
    },
    dateStr() {
      const date = new Date(this.dateArr[0].date)
      return { year: date.getFullYear(), month: date.getMonth() + 1 }
    }
  }
}
</script>

<template>
  <div class="date-panel">
    <p class="title">{{dateStr.year}}年{{dateStr.month}}月</p>
    <div class="date-table">
      <div
        v-for="(v,i) in dateList"
        :key="i"
        class="table-cell"
        :class="[{'disable':!v.id},{'empty':!v.text},{'checked':checkedDate===v.date}]"
        @click="()=>handleClick(v)"
      >
        <span class="text">{{v.text}}</span>
        <!-- <span class="price" v-if="v.singlePersonPrice">￥{{v.singlePersonPrice}}</span> -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.date-panel {
  padding: 20px 0;
  .title {
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
  }

  .date-table {
    display: flex;
    flex-wrap: wrap;
    .table-cell {
      width: 107rpx;
      min-height: 107rpx;
      text-align: center;
      border-radius: 5px;

      line-height: 107rpx;
      &.disable {
        opacity: 0.25;
        pointer-events: none;
      }
      &.empty {
        visibility: hidden;
      }
      &.checked {
        color: #fff;
        background-color: $main-color;
        .price {
          color: #fff;
        }
      }

      .text {
        vertical-align: middle;
      }
      // .text,
      // .price {
      //   display: block;
      // }
      // .price {
      //   font-size: 12px;
      //   color: $main-color;
      // }
    }
  }
}
</style>
